<!-- 评论列表 -->
<template>
  <el-dialog
    :title="isUpdate? title:title"
    :visible="visible"
    width="70%"
    :destroy-on-close="true"
    :lock-scroll="false"
    :before-close="close"
    @update:visible="updateVisible">
    <el-form
      ref="form"
      :model="form"
      label-width="120px">
      <el-row :gutter="18">
        <el-col :lg="6" :md="12">
          <el-form-item label="评价日期:">
            <el-date-picker
              style="width: 200px"
              v-model="where.time"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="评价标题:">
            <el-input
              clearable
              v-model="where.title"
              placeholder="请输入标题"/>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <el-form-item label="评价星级:" prop="stars">
            <el-select style="width: 100px" clearable filterable class="form_width" v-model="where.stars">
              <el-option v-for="(item,index) in searchInfo.star_rating_list" :key="index" :label="item.label"
                         :value="item.val"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
          <div class="ele-form-actions">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="reload(1)">查询
            </el-button>
            <el-button @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="table" :data="dataList" v-loading="loading"  row-key="id" border
              height="calc(100vh - 320px)" highlight-current-row lazy
              :row-style="{ height: '100px' }"
              :load="load">
      <el-table-column prop="evaluation_time"  label="评价日期" min-width="100" align="center"/>
      <el-table-column prop="evaluation_title"  label="评价标题" min-width="100" align="center"/>
      <el-table-column prop="evaluation_connent"  label="评价内容" min-width="100"  align="center">
        <template slot-scope="{row}">
          <el-tooltip class="item" :content="row.evaluation_connent" placement="top">
            <div class="info-title">{{row.evaluation_connent}}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="comment_image"  label="内容图片" min-width="100" align="center">
        <template slot-scope="{row}">
          <el-popover placement="top-start" trigger="click">
            <img :src="row.comment_image" style="width: 400px;height: 400px">
            <img slot="reference" v-if="row.comment_image" :src="row.comment_image" style="width: 90px;height: 80px; cursor:pointer">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="stars"  label="评价星级" min-width="100" align="center"/>
      <el-table-column prop="evaluation_user"  label="评论人" min-width="100" align="center"/>
      <el-table-column prop="evaluation_user_profile"  label="评论人profile" min-width="100" align="center"/>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 50,100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'EvaluationMonitoringDetail',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    searchInfo: Object,
  },
  components: {},
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      // 表单数据
      form: Object.assign({tag_type: 1,tag_name_lab:'标签'}, this.data),
      url: '/EvaluationMonitoring/detail',
      // 表单验证规则
      rules: {},
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      title:'',
      blurIndex: null,//记录光标位置
      blurIndexContent: null,//记录光标位置
      templateTypeList:[],//模板类型
      // 列表数据
      dataList: [],
      // 表格搜索条件
      where: {
        page:1,
        limit:10,
        id:0,
      },
      // 全部栏目数据
      cateList: [],
      multipleSelection: [],
      currentPage4: 1,
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10 // 每页的数据条数
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.title = this.form.asin+' 评论列表';
        this.isUpdate = true;
        this.where = {page:1,limit:10,id:this.form.id};
        this.query()
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    }
  },
  computed: {
  },
  mounted() {
    // this.query()
  },
  methods: {
    /* 修改标签内容 */
    handleSizeChange(val) {
      this.pageSize = this.where.limit = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.currentPage = this.where.page = val;
      this.query();
    },
    /* 刷新表格 */
    reload(pageSign) {
      if (pageSign) this.where.page=1;
      this.query();
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.query(1);
    },
    /* 查询 */
    query(pageSign) {
      if (pageSign) this.currentPage = this.where.page =1;
      this.loading = true;
      this.$http.get(this.url,{params: this.where}).then(res => {
        this.loading = false;
        if (res.data.code === 0) {
          this.dataList = res.data.data;
          this.total = res.data.count;
        } else {
          this.$message.error(res.data.msg || '获取数据失败');
        }
      }).catch(e => {
        this.loading = false;
        this.$message.error(e.message);
      });
    },
    /**
     * 异步加载数据
     */
    load(tree, treeNode, resolve) {
      this.where['pid'] = tree.id;
      this.$http.get(this.url, {params: this.where}).then(res => {
        if (res.data.code === 0) {
          resolve(res.data.data)
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    /* 关闭页面 */
    close(hide) {
      if (hide) {
        hide();
      }
      this.$emit("done");
    }
  }
}
</script>

<style scoped>

::v-deep .el-tooltip{
  height: 150px;
}

</style>
